 
function dropDwon(option) {
	function drop(def) {
		this.name = def.id;
		this.selVal= {} ;
		this.init();
	};
	drop.prototype = {
		init: function () {
			this.list();
			this.myClick();
			this.callBack();
		},
		//添加下拉框到页面中
		list: function () {
			var id = '#' + this.name;
			var dataConfig = {} ;
			var txtVal = '' ;
			var txtObjVal = '' ;
			for (var key in def.myData) {
				if( def.myData[key].selected == true){
					dataConfig[key] = def.myData[key].val ;
					txtVal += "," + key ;
					txtObjVal += "," + def.myData[key].val ;
				}
			};
			$(id).data("dataConfig",dataConfig);
			$(id).val(txtVal.substring(1));
			$(id).attr("tag",txtObjVal.substring(1));
			var newPo = $(id).offset();
			var newW = parseInt($(id).css('width'));
			var newH = parseInt($(id).css('height'));
			$('.drop-dwon').css({
				width: newW + 'px',
				top: newPo.top + newH + 'px',
				left: newPo.left + 'px'
			});
		},
		//下拉框点击事件
		myClick: function () {
			var self = this;
			var name = this.name;
			var id = '#' + this.name;
			$(id).click(function (e) {
				e.stopPropagation();
				$('.drop-dwon').remove();
				var _this = $(this);
				var lists, drop;
				lists = '';
				$(id).addClass("active");
				var dataConfig = $("#"+name).data("dataConfig") || {} ;
				for (var key in def.myData) {
					var isActive = '' ;
					var sel = '' ;
					if( dataConfig[key] != undefined && dataConfig[key] != '' ){
						isActive = 'active' ;
						sel = true ;
					}
					lists += '<li class="'+ isActive +'" value="' + def.myData[key].val + '" sel="'+sel+'">' + key + '</li>';
				};
				var drop = '<ul class="drop-dwon" id="' + name + 'con">' + lists + '</ul>';
				$('body').append(drop);
//				$(id).parent().append(drop);
 
				self.position('.drop-dwon');
				//改变屏幕宽度的时候，重新计算下拉框内容的位置
				window.onresize = function () {
					self.position('.drop-dwon');
				};
				self.mltClick();
			});
		},
		//计算下拉框内容的位置
		position: function (obj) {
			var id = '#' + this.name;
			var myPo = $(id).offset();
			var myW = parseInt($(id).css('width'));
			var myH = parseInt($(id).css('height')) - 1;
			$(obj).css({
				top: myPo.top + myH + 'px',
				left: myPo.left + 'px',
				width: myW + 'px',
			});
		},
		mltClick: function () {
			var self = this;
			var name = this.name;
			var id = '#' + name + 'con';
			var header = $('#' + name);
			$(id).on('click', 'li', function (e) {
				e.stopPropagation();
				var sel = $(this).attr('sel');
				if (sel == 'true') {
					$(this).removeClass('active');
					$(this).attr('sel', false);
					var dataConfig = $("#"+name ).data("dataConfig") || {} ;
					var newDataConfig = {} ;
					// 轮询数值
					var txtVal = '' ;
					var txtObjVal = '' ;
					for(key in dataConfig){
						if( key != $(this).html()){
							txtVal += "," + key ;
							txtObjVal += "," + dataConfig[key] ;
							newDataConfig[key] = dataConfig[key] ;
						}
					}
					$("#"+name ).data("dataConfig",newDataConfig);
					$("#"+name ).val(txtVal.substring(1));
					$("#"+name).attr("tag",txtObjVal.substring(1));
				} else {
					$(this).addClass('active');
					$(this).attr('sel', true);
					var txt = $(this).text() ;
					var dataConfig = header.data("dataConfig") || {} ;
					dataConfig[txt] = $(this).attr("value") ;
					header.data("dataConfig",dataConfig);
					if( header.val()!=''){
						header.val( header.eq(0).val() +","+ txt); 
						header.attr("tag", header.attr('tag')+","+ $(this).attr("value")  );
					}else{
						header.val( txt); 
						header.attr("tag",  $(this).attr("value")  );
					}
				};
				self.position('.drop-dwon');
			});
			$(document).click(function () {
				$(id).remove();
				$("#"+name).removeClass("active");
			});
		},
		callBack:function(){
			if(def.callBack != null ){
				def.callBack();
			}
		}
	};
	var def = {
		myData: {
			name1: {
				val: '默认选中',
				selected: true,
			},
			name2: {
				val: '下拉1',
			},
			name3: {
				val: '下拉2'
			},
			name4: {
				val: '下拉3'
			},
		},
	};
	def = $.extend(def, option);
	new drop(def);
}
